<template>
  <div class="container">
    <div class="tableBox">
      <el-table
        border
        :data="tableData"
        v-loading="tableLoading"
        element-loading-text="加载中..."
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
      >
        <el-table-column prop="time" label="创建时间"></el-table-column>
        <el-table-column prop="department" label="所属部门"></el-table-column>
        <el-table-column
          prop="documenType"
          label="证件类型名称"
        ></el-table-column>
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small"
              >添加</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="handleDeleteClick(scope.row)"
              style="color:#f56c6c"
              >移除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- <div class="paginationBox">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="requestData.pageNum"
          :page-sizes="[100, 200, 300, 400]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="1000"
        >
        </el-pagination>
      </div> -->
    </div>
    <!-- 新增 -->
    <div class="addFileNames">
      <el-dialog
        :visible="addFileNamesVisible"
        width="30%"
        :show-close="false"
        @closed="closeHandle"
      >
        <div class="addFileNamesContent">
          <div class="title">请输入需要新增的档案类型名称</div>
          <el-input
            v-model="addFileNamesTitle" 
            maxlength = "4"
            placeholder="请输入需要添加档案名称"
          />
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="addFileNamesVisible = false">取 消</el-button>
          <el-button type="primary" @click="addFileNamesHandle"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
    <!-- 删除 -->
    <div class="deletaFileNames">
      <el-dialog
        :visible="deleteFileNamesVisible"
        width="50%"
        :show-close="false"
        title="移除档案"
        @closed="closeDeteleHandle"
      >
        <div class="deleteFileNamesContent">
          <div
            class="deleteItem"
            v-for="(item, index) in documenTypeArr"
            :class="[currentIndex === index ? 'current' : '']"
            :key="index"
            @click="chooseCurrent(index, item.id)"
          >
            {{ item.name }}
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button size="mini" @click="deleteFileNamesVisible = false"
            >取 消</el-button
          >
          <el-button size="mini" type="danger" @click="deleteFileNamesHandle"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import Const from "@/api/Const.js";
export default {
  data() {
    return {
      tableLoading: false,
      addFileNamesTitle: "",
      addFileNamesVisible: false,
      deleteFileNamesVisible: false,
      currentIndex: "",
      governmentDepartmentArr: [], //政务部门
      goodDepartmentArr: [], //商品
      requestData: {
        pageNum: 1,
        pageSize: 10
      },
      typeList: [],
      tableData: [
        {
          time: "2021.5.13 11:22:11",
          department: "政务部门",
          documenType: "烟草证、营业执照、食品证"
        },
        {
          time: "2021.5.13 11:22:11",
          department: "商品部门",
          documenType: "烟草证、营业执照、食品证"
        }
      ],
      currentObj: "",
      type: "",
      documenTypeArr: []
    };
  },
  created() {
    this.initData();
  },
  methods: {
    initData() {
      this.tableLoading = true;
      var that = this
      this.$axios
        .get(Const.api.getDA)
        .then(res => {
          let { data } = res;
          if (data.code === 0) {
            that.typeList = data.data
            let governmentDepartmentArr = data.data.filter(
              item => item.type === "1"
            );
            let goodDepartmentArr = data.data.filter(item => item.type === "2");
            if (governmentDepartmentArr.length > 0) {
              this.governmentDepartmentArr = governmentDepartmentArr.filter(
                item => item.name
              );
              let governmentDepartmentTXT = governmentDepartmentArr
                .map(item => item.name)
                .filter(item => item)
                .join("、");
              this.tableData[0].documenType = governmentDepartmentTXT;
            }
            if (goodDepartmentArr.length > 0) {
              this.goodDepartmentArr = goodDepartmentArr.filter(
                item => item.name
              );
              let goodDepartmentTXT = goodDepartmentArr
                .map(item => item.name)
                .filter(item => item)
                .join("、");
              this.tableData[1].documenType = goodDepartmentTXT;
            }
            this.tableLoading = false;
          } else {
            this.$message.error(data.message);
            this.tableLoading = false;
          }
        })
        .catch(err => {
          this.tableLoading = false;
        });
    },
    handleClick({ department }) {
      let currentObj = this.tableData.find(
        item => item.department === department
      );
      if (department === "政务部门") {
        this.type = 1;
      } else {
        this.type = 2;
      }
      this.currentObj = currentObj;
      this.addFileNamesVisible = true;
    },
    addFileNamesHandle() {
      if (!this.addFileNamesTitle) {
        this.$message.error("请输入档案名称！");
        return false;
      }
      var addPar = this.typeList.filter(
          item => item.name == this.addFileNamesTitle 
      );
      if(addPar){
        this.$message({
              message: "名称重复！",
              type: "error"
            });
        return 
      }
      this.saveType();
    },
    // 新增
    saveType() {
      this.$axios
        .get(Const.api.addCer, {
          params: {
            name: this.addFileNamesTitle,
            type: this.type
          }
        })
        .then(res => {
          if (res.data.code == 0) {
            this.$axios.get(Const.api.saveOprateLog,{
                  params:{
                    model:'档案配置',
                    oprate:'新增'
                  }
                });
            this.$message({
              message: "保存成功！",
              type: "success"
            });
            this.initData();
            this.addFileNamesVisible = false;
          }
        });
    },
    handleDeleteClick({ department, documenType }) {
      if (!documenType) {
        this.$message.error("请先添加档案!");
        return false;
      }
      if (department === "政务部门") {
        this.type = 1;
        this.documenTypeArr = this.governmentDepartmentArr;
      } else {
        this.documenTypeArr = this.goodDepartmentArr;
        this.type = 2;
      }

      this.deleteFileNamesVisible = true;
    },
    // 删除
    deleteFileNamesHandle() {
      if (this.currentIndex === "") {
        this.$message.error("请选择需要移除的档案！");
        return false;
      }
      if (this.deleteId === "") {
        this.$message.error("请选择需要移除的档案！");
        return false;
      }
      this.$axios
        .get(Const.api.deleteCer, {
          params: {
            id: this.deleteId
          }
        })
        .then(res => {
          if (res.data.code == 0) {
            this.$axios.get(Const.api.saveOprateLog,{
                  params:{
                    model:'档案配置',
                    oprate:'删除'
                  }
                });
            this.$message({
              message: "删除成功！",
              type: "success"
            });
            this.initData();
            this.deleteFileNamesVisible = false;
          }
        });
    },
    closeHandle() {
      this.addFileNamesTitle = "";
    },
    closeDeteleHandle() {
      this.currentIndex = "";
      this.deleteId = "";
    },

    chooseCurrent(index, id) {
      this.currentIndex = index;
      this.deleteId = id;
    },
    handleCurrentChange() {}
  }
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  .operationBtn {
    display: flex;
    justify-content: flex-end;
  }
  .tableBox {
    margin-top: 20px;
  }
  .paginationBox {
    margin: 20px;
    display: flex;
    justify-content: flex-end;
  }
}
.addFileNamesContent {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  .title {
    margin-bottom: 20px;
  }
}
.deleteFileNamesContent {
  display: flex;
  padding: 20px;
  border-radius: 10px;
  border: 1px solid #cacaca;
  .deleteItem {
    margin: 10px;
    padding: 10px 20px;
    background-color: #cececd;
    color: #fff;
    cursor: pointer;
    &.current {
      background-color: #feb2ac;
    }
  }
}
</style>
